<?php echo HTML::contenido('css/formacio/basic.css'); ?>
<?php echo HTML::contenido('css/formacio/dropzone.css'); ?>
<?php echo HTML::contenido('css/formacio/formacio.css'); ?>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<?php echo(HTML::script('plugins/form-xeditable/bootstrap3-editable/js/bootstrap-editable.min.js'));?>
<?php echo(HTML::script('plugins/dropzone/dropzone.min.js'));?>
<?php echo(HTML::script('plugins/dropzone/dropzone.js'));?>
<?php echo(HTML::script('plugins/form-stepy/jquery.stepy.js'));?>


<div id="page-heading">
      <ol class="breadcrumb">
        <li><a href="/">Portada</a></li>
        <li>Formació</li>
        <li class="active">Crear curs</li>
      </ol>
    </div>
	<div class="container">
		<div class="row">
<div class="panel panel-danger">
		  <div class="panel-heading">
				<h4>Crear Curs</h4>
		  </div>
		  <div class="panel-body">
		  	<div class="tab-content">
				<div class="tab-pane active" id="domwizard">
					<div id="basicwizard" class="form-horizontal">
					<fieldset title="Part 1">
						<legend>Crear Portada</legend>
                        <div style="min-height: 450px">
                        <div style="float: left; width: 30%;">
                            <form action="#" id="subir_fotos" class="dropzone"></form>
                        </div> 
                        <div style="float: left; width: 70%;">
                                <div class="form-group">
                                    
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Categoria</label>
                                    <div class="col-sm-6">
                                        <input id="categoria" type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Nom Curs</label>
                                    <div class="col-sm-6">
                                        <input id="nombre" type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Descripció</label>
                                    <div class="col-sm-6">
                                        <textarea id="descripcion"  rows="6" class="form-control autosize"></textarea>
                                    </div>
                                </div>
            
           
                                <div class="form-group" style="padding: 20px 10px 20px 10px; margin-bottom: 0px">
                                    <label class="col-sm-3 control-label">Grup</label>
                                    <div class="col-sm-6">
                                        <?php 
                                        
                                        $array = array("futbol", "futbol_sala", "escola", "comite", "monitor", "online");
                                        
                                        foreach($array as $valor){

                                                echo '<label class="checkbox-inline">
                                                        <input type="checkbox" id="inlinecheckbox1" value="' . $valor . '">' . $valor .'
                                                      </label>';

                                        }
                                        
                                        ?>
                                        
                                    </div>
                                </div>  
                        </div> 
                        </div>    
					</fieldset>
					<fieldset title="Part 2">
						<legend>Crear Contingut</legend>
						<div id="parte2" class="row" style="min-height: 450px">
							<div class="form-group">
                                <label class="col-sm-3 control-label">Titol Curs</label>
                                <div class="col-sm-6">
                                    <input id="nombre2" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Data Curs</label>
                                <div class="col-sm-6">
                                    <input id="fecha" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="form-group sector" style="border-top: 1px solid #e6e7e8;">
       
                            </div>
                            <div id="0">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Titol Apartat</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control titulo seccion1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Contingut Apartat</label>
                                <div class="col-sm-6">
                                    <textarea rows="6" class="form-control autosize contenido seccion1"></textarea>
                                </div>
                            </div>
                            </div>
                            
						</div>
                        <div id="tabla">
                            <fieldset title="Tabla">
                                <div>X</div>
						      <legend>Crear Tabla</legend>
						          <div id="parte2" class="row" style="min-height: 450px">
                                    <div id="filas">
							         <div class="form-group">
                                        <label id="titol_tabla" class="col-sm-3 control-label">Titol</label>
                                        <div class="col-sm-6">
                                            <input id="titol" type="text" class="form-control">
                                        </div>
                                    </div>
                                    
                                    <div id="linias">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Titol Apartat</label>
                                        <div class="col-sm-6">
                                            <input  type="text" class="form-control filas titol-fila">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Link</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control filas link">
                                        </div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"></label>
                                        <div class="col-sm-6">
                                            <input id="añadir_fila" type="button" value="Añadir fila" />
                                        </div>
                                    </div>
						          </div>
                                  <div class="form-group">
                                    <label class="col-sm-3 control-label"></label>
                                    <div class="col-sm-6">
                                        <input id="generar_tabla" type="button" value="Generar Tabla" />
                                    </div>
                                  </div>
                        
					           </fieldset>
                        </div>
                        <div id="lista">
                            <fieldset title="Tabla">
                                <div>X</div>
						      <legend>Crear Tabla</legend>
						          <div id="parte2" class="row" style="min-height: 450px">
                                    <div id="lineas">
							         <div class="form-group">
                                        <label id="titol_tabla" class="col-sm-3 control-label">Línia</label>
                                        <div class="col-sm-6">
                                            <input id="titol" type="text" class="form-control lineas">
                                        </div>
                                    </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"></label>
                                        <div class="col-sm-6">
                                            <input id="añadir_linea" type="button" value="Añadir Línia" />
                                        </div>
                                    </div>
						          </div>
                                  <div class="form-group">
                                    <label class="col-sm-3 control-label"></label>
                                    <div class="col-sm-6">
                                        <input id="generar_llista" type="button" value="Generar Llista" />
                                    </div>
                                  </div>
                        
					           </fieldset>
                        </div>
                            <label class="col-sm-3 control-label"></label>
                            <input id="lista_boton" type="button" value="Llista" />
                            <input id="tabla_boton" type="button" value="Tabla" />
                            <input id="apartat" type="button" value="+ Apartat" />
					</fieldset>
                    <fieldset title="Part 3">
						<legend>Crear Informacio</legend>
						<div class="row" style="min-height: 450px">
							<div class="form-group" style="padding: 20px 10px 20px 10px;">
                                <label class="col-sm-3 control-label">Preu</label>
                                <div class="col-sm-6">
                                    <input id="preu" type="text" class="form-control seccion2">
                                </div>
                            </div>
                            <div class="form-group" style="padding: 20px 10px 20px 10px;">
                                <label class="col-sm-3 control-label">Matrícula</label>
                                <div class="col-sm-6">
                                    <input id="matricula" type="text" class="form-control seccion2">
                                </div>
                            </div>
                            <div class="form-group" style="padding: 20px 10px 20px 10px;">
                                <label class="col-sm-3 control-label">Requisits d'Accés</label>
                                <div class="col-sm-6">
                                    <input id="requisitos" type="text" class="form-control seccion2">
                                </div>
                            </div>
                            <div class="form-group" style="padding: 20px 10px 20px 10px;">
                                <label class="col-sm-3 control-label">Convocatòria</label>
                                <div class="col-sm-6">
                                    <input id="convocatoria" type="text" class="form-control seccion2">
                                </div>
                            </div>
                            <div class="form-group" style="padding: 20px 10px 20px 10px;"> 
                                <label class="col-sm-3 control-label">Idioma</label>
                                <div class="col-sm-6">
                                    <input id="idioma" type="text" class="form-control">
                                </div>
                            </div>
						</div>
					</fieldset>
					<input type="submit" class="finish btn-success btn" value="Submit" />
                    <input id="cantidad_apartados" type="hidden" value="1"/>
                    <input id="nombre_imagen" type="hidden" value=""/>
                    <input id="tablas" type="hidden" value=""/>
                    <input id="lineas" type="hidden" value=""/>
				</div>
			</div>				
			</div>
		
		  		
			
				
				
		  </div>
		</div>
 	  </div>
   </div>     
        
<script>


	$('#basicwizard').stepy();
   	$('.stepy-navigator').wrapInner('<div class="pull-right"></div>'); //mueve botones del formulario(back,next) a la derecha


    $('#apartat').click(function(){
        id = parseInt($('#cantidad_apartados').attr('value'))
        $('#parte2').append('<div class="form-group" style="border-top: 1px solid #e6e7e8;"></div><div id="' + id + '"><div class="form-group"><div class="form-group"><label class="col-sm-3 control-label">Titol Apartat</label><div class="col-sm-6"><input type="text" class="form-control titulo seccion1"></div></div><div class="form-group"><label class="col-sm-3 control-label">Contingut Apartat</label><div class="col-sm-6"><textarea rows="6" class="form-control autosize contenido seccion1"></textarea></div></div></div>')
        cantidad = parseInt($('#cantidad_apartados').attr('value')) + 1;
        $('#cantidad_apartados').attr('value', cantidad); 
        
    })
    
    
    $("#subir_fotos").dropzone({ 
	    url: url_base+"uploadImagenFormacio/",
	    maxFilesize: 3,
	    init: function() {
	        this.on("success", function(file, response) {

	            var obj = jQuery.parseJSON(response)
	            var nombre = obj[0].imagen;
                $('#nombre_imagen').attr('value', nombre);
	        })
	    }
	});
    
    
    $('input:submit').click(function(){
        
        tablas = $('#tablas').attr('value');
        imagen = $('#nombre_imagen').attr('value');
        categoria = $('#categoria').val();
        nombre = $('#nombre').val();
        descripcion = $('#descripcion').val();
        json0 = '[{"titulo": "' + nombre + '", "descripcion": "' + descripcion + '"}]';
        grup = '';
        $("input:checkbox:checked").each(function(){
	       grup = grup + ' ' + $(this).val();
        });
        nombre2 = $('#nombre2').val();
        fecha = $('#fecha').val();
        json = '{"'
        next = 0;
        $('.seccion1').each(function(){ 
           if(next == 1 && $(this).hasClass('titulo')){
            json = json + ', "';
           } 
           if($(this).hasClass('titulo')){
                json = json + $(this).val() + '": "';
           } 
           if($(this).hasClass('json_tabla')){
                json = json + tablas;
           } 
           if($(this).hasClass('contenido')) {
                json = json + $(this).val() + '"';
                next = 1;
           }           
        })
        json = json + '}';
        json2 = '{"'
        next=0;
        $('.seccion2').each(function(){ 
           if(next == 1){
            json2 = json2 + ', "';
           } 
           json2 = json2 + $(this).attr('id') + '": "' + $(this).val() + '"';
           next = 1;
        })
        json2 = json2 + '}';
        idioma = $('#idioma').val();
        alert(json0 + '<br>' + json + '</br>' + json2);

        $.ajax({
            url: url_base+"formacio/crearCursSubmit",
            data: {imagen:imagen, titulo:categoria, descripcion:json0, categoria:grup, idioma: idioma, nombre: nombre2, year: fecha, contenido: json, informacion: json2}, 
            type: 'post',
            beforeSend:function(){
                fcf.cargando();         
                },
            success: function(data) {
                fcf.hidecargando();
                alert(data);
                }
       	})
 
    })
    
    
    $('input[value="Eliminar"]').click(function(){
        id = $(this).attr('class');
        $('#' + id).remove();
        $('.' + id).remove();
        alert(id);
            
    })        
	
    $('#tabla_boton').click(function(){
        $('#tabla').show();
    })
    
    $('#añadir_fila').click(function(){
        $('#filas').append('<div class="form-group"><label class="col-sm-3 control-label">Titol Apartat</label><div class="col-sm-6"><input type="text" class="form-control filas titol-fila"></div></div><div class="form-group"><label class="col-sm-3 control-label">Link</label><div class="col-sm-6"><input type="text" class="form-control filas link"></div></div>');
    })
    
    $('#generar_tabla').click(function(){
        titulo = $('#titol').val();
        var tabla = "<center class='seccion1 json_tabla' style='text-align: center'><table class='taula'><tbody><tr><td class='celda0'>" + titulo + "</td></tr>";
        var titol = '';
        $('.filas').each(function(){
            if($(this).hasClass('titol-fila')){
                titol = $(this).val();
            } else {
                tabla = tabla + "<tr><td class='celda3'><a href='" + $(this).val() + "'>" + titol + "</a></td></tr>";
            }
        })
        tabla = tabla + "</tbody></table></center>";
        $('#parte2').append(tabla);
        $('#tablas').attr('value', ', "tabla": "' + tabla + '"');
        $('#tabla').hide();
        $('#filas').html('<div class="form-group"><label id="titol_tabla" class="col-sm-3 control-label">Titol</label><div class="col-sm-6"><input id="titol" type="text" class="form-control"></div></div><div id="linias"><div class="form-group"><label class="col-sm-3 control-label">Titol Apartat</label><div class="col-sm-6"><input  type="text" class="form-control filas titol-fila"></div></div><div class="form-group"><label class="col-sm-3 control-label">Link</label><div class="col-sm-6"><input type="text" class="form-control filas link"></div></div>')
    })
    
    $('#lista_boton').click(function(){
        $('#lista').show();
    })
    $('#añadir_linea').click(function(){
        $('#lineas').append('<div class="form-group"><label id="titol_tabla" class="col-sm-3 control-label">Línia</label><div class="col-sm-6"><input id="titol" type="text" class="form-control"></div></div>');
    })
    
    $('#generar_llista').click(function(){
        var lista = "<ul class='style'>";
        $('.lineas').each(function(){
            lista = lista + "<li class='cos'>" + $(this).val() + "</li>";
        })
        lista = lista + "</ul>";
        alert(lista);
        $('#parte2').append(lista);
        $('#lineas').attr('value', ', "lista": "' + lista + '"');
        $('#lista').hide();
        $('#lineas').html('<div class="form-group"><label id="titol_tabla" class="col-sm-3 control-label">Línia</label><div class="col-sm-6"><input id="titol" type="text" class="form-control lineas"></div></div>')
    })

    $('#filtres').hide();
	

</script>